<template>
    <el-container class="mainContainer" direction="vertical">
        <el-main>
            <el-row :gutter="0">
                <el-col :lg="12" :md="24" :sm="24" :xs="24" id="chart1">
                    <el-card class="box-card">
                        <PolarChart :chart-data="apiData.noise_statistic" :collect-data="apiData.noise_collect"
                            ref="polarChart" />
                    </el-card>
                </el-col>

                <el-col :lg="12" :md="24" :sm="24" :xs="24" id="chart2">
                    <el-card class="box-card">
                        <PolylineChart :chart-data="apiData.noise_district" ref="polylineChart" />
                    </el-card>
                </el-col>
            </el-row>
            <Map :vect-layout-geojson="geoJsonData" v-if="mapFlag" />
        </el-main>
    </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Map from "../components/map/index.vue";
import PolarChart from "../components/charts/polar.vue";
import PolylineChart from "../components/charts/polyline.vue";
import { apiCommon } from "@/utils/index.js";

// 自定义事件到父组件
const emit = defineEmits(['getData']);

// 定义响应式数据
const apiData = ref({
    noise_statistic: [],
    noise_district: [],
});

// 定义组件引用
const polarChart = ref(null);
const polylineChart = ref(null);

const geoJsonData = ref(null);
const mapFlag = ref(false);

const getAsyncCatchData = async (api) => {
    try {
        let targetObj = await apiCommon(api);
        return targetObj.data[0].data
    } catch (error) {
        console.error(error);
    }
}

// 重新获取数据的方法
const reGetData = (targetObj, geoJsonObj) => {
    // console.log("重新获取数据", targetObj, geoJsonObj);

    apiData.value = JSON.parse(targetObj);
    geoJsonData.value = JSON.parse(geoJsonObj);
    mapFlag.value = true;
}

// 挂载时执行
onMounted(() => {
    emit('getData');
});

// 暴露方法
defineExpose({
    getAsyncCatchData,
    reGetData
});
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.box-card {
    width: 98%;
    height: 300px;
}
</style>